<template>
	<view class="page">
		<headerVue title="充值"></headerVue>
		<view class="inpVue padding30">
			<view class="label">{{i18n.p3}}</view>
			<view class="flex margin30">
				<view class="item flex align-center padding-row30">
					<image src="../../static/coins/usdt.png" style="width: 72rpx; height: 72rpx;"></image>
					<text style="line-height: 1; font-size: 32rpx; padding-left: 15rpx;">USDT</text>
				</view>
			</view>
			<view class="using">{{i18n.p4}}：{{ balance }}</view>
		</view>

		<view class="inpBox margin40 flex align-center">
			<input type="number" v-model="quantity" :placeholder="i18n.p4"
				placeholder-style="font-size: 32rpx;color: rgba(255,255,255,0.3);" />
			<view class="max" @click="quantity=balance">MAX</view>
		</view>

		<view class="btn margin60" @click="chargeFun()">
			<image src="../../static/wallet/btn.png" style="width: 100%; height: 100%;"></image>
		</view>

		<view class="thVue flex-between margin40 padding-row30">
			<view class="li">时间</view>
			<view class="li text-right">数量</view>
		</view>
		<view class="tdVue flex-between padding-row30 margin0" v-for="(item, index) in list" :key="index">
			<view class="li">{{item.createTime}}</view>
			<view class="li text-right">{{item.amount}}</view>
		</view>
	</view>
</template>

<script>
	import wallet from "common/wallet";
	import {
		ethers
	} from "ethers";
	export default {
		data() {
			return {
				quantity: "",
				balance: 0,
				address: "",
				pageNum: 1,
				pageSize: 20,
				isLastPage: false,
				list: []
			}
		},
		
		computed:{
			i18n() {
				return this.$t("message");
			}
		},
		async onReachBottom() {
			if(this.isLastPage) return
			this.pageNum++
			await this.getList()
		},

		onShow() {
			setTimeout(() => {
				this.getRechargeAdd()
				this.getUsing()
				this.getList()
			}, 500)
		},

		methods: {
			async getList(){
				const res = await this.$request("/front/user/rechargeRecord", {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				})
				if(res.code===0) {
					console.log(res)
					this.list = this.list.concat(res.data.list)
					this.isLastPage = res.data.isLastPage
				}
			},
			async getUsing() {
				this.balance = await wallet.getTokenBalance(this.$store.state.usdtaddress, this.$store.state.account);
			},
			// 获取充值地址
			async getRechargeAdd() {
				const res = await this.$request("/front/user/rechargeAddress")
				if (res.code === 0) {
					this.address = res.data
				}
			},

			async chargeFun() {
				if (this.balance < this.quantity) {
					this.$u.toast("余额不足")
					return;
				}
				uni.showLoading();
				let number = ethers.utils.parseEther(this.quantity);
				await wallet.transferTo(this.$store.state.usdtaddress, this.address, number).then(res => {
					uni.hideLoading()
					this.$u.toast(this.i18n.success)
					this.quantity = ""
					this.getUsing()
				}).catch(e => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.inpVue {
		width: 100%;

		.label {
			line-height: 1;
		}

		.item {
			width: 320rpx;
			height: 158rpx;
			background: url("../../static/wallet/kuang.png") no-repeat;
			background-size: 100% 100%;
		}

		.using {
			line-height: 1;
			padding-top: 20rpx;
		}
	}

	.inpBox {
		width: 670rpx;
		height: 168rpx;
		background: url("../../static/wallet/kuang1.png") no-repeat;
		background-size: 100% 100%;
		padding: 0 40rpx;

		input {
			flex: 1;
			color: #fff;
			font-size: 32rpx;
		}

		.max {
			font-weight: 600;
			font-size: 32rpx;
			color: #45F882;
			text-decoration: underline;
		}
	}

	.btn {
		width: 327rpx;
		height: 90rpx;
	}

	.thVue {
		width: 670rpx;
		height: 78rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 8rpx;

		.li {
			height: 78rpx;
			line-height: 78rpx;
			color: rgba(255, 255, 255, 0.6);
		}
	}

	.tdVue {
		width: 670rpx;
		height: 78rpx;

		.li {
			height: 78rpx;
			line-height: 78rpx;
			color: rgba(255, 255, 255, 0.6);
		}
	}

	.tdVue:nth-child(2n) {
		background: rgba(255, 255, 255, 0.03);
		;
	}
</style>